<template>
  <div>
    <div>
      <a href="/#/addpermission">
        <Button class="add" type="primary" icon="plus-round">新增权限</Button>
      </a>
      <div class="table">
        <Table border :columns="columns2" :data="data2"></Table>
      </div>
    </div>
    <div class="page-bar">
      <Page :total="totalPage" :page-size="pageSize" show-total show-elevator @on-change="page"></Page>
    </div>
  </div>
</template>
<style>
.page-bar {
  margin-top: 25px;
  text-align: center;
}
.add {
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
}

.table {
  margin-top: 30px;
}
</style>

<script>
export default {
  data() {
    return {
      columns2: [
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center"
        },
        {
          title: "权限名称",
          key: "name",
          align: "center",
          render: (h, params) => {
            return h("div", [h("strong", params.row.name)]);
          }
        },
        {
          title: "权限介绍",
          key: "intro"
        },
        {
          title: "人数",
          key: "num",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.revise(params.row.id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data2: [],
      totalPage: null,
      pageSize: null,
      permission: {
        name: null,
        intro: null
      }
    };
  },
  methods: {
    revise(id) {
      let that = this;
      if (id == 1) {
        that.$Message.warning("权限「管理者」不能更改。");
        return false;
      } else {
        this.$axios.get("backend/permission/" + id + "/edit", null, function(
          res
        ) {
          that.permission = {
            name: null,
            intro: null
          }
          that.$Modal.confirm({
            title: "修改权限",
            onOk: () => {
              if (that.permission.name == null) {
                that.permission.name = res.permission;
              }
              if (that.permission.intro == null) {
                that.permission.intro = res.intro;
              }
              if (that.permission.name.length < 2) {
                that.$Message.warning("权限名称太短，请保持在3~8位。");
                return false;
              }
              if (that.permission.name == "管理者") {
                that.$Message.warning("权限名称不能为「管理者」，请重新输入。");
                return false;
              }
              if (that.permission.intro.length < 6) {
                that.$Message.warning("权限介绍太短，请重新输入。");
                return false;
              }
              // console.log(that.permission);
              setTimeout(function() {
                that.$axios.put(
                  "backend/permission/" + id,
                  that.permission,
                  function(res) {
                    if (res == 0 || res == 2) {
                      that.$Message.error("权限不足，修改用户失败！");
                    } else if (res == 3) {
                      that.$Message.warning("用户资料没有修改！");
                    } else {
                      that.$Message.success("修改用户成功！");
                      that.getData();
                    }
                  }
                );
              }, 700);
            },
            onCancel: function() {},
            render: h => {
              return h("div", [
                h("div", [
                  h("br"),
                  "权限名称",
                  h("Input", {
                    props: {
                      value: res.permission
                    },
                    on: {
                      input: val => {
                        that.permission.name = val;
                      }
                    }
                  })
                ]),
                h("br"),
                "权限介绍",
                h("Input", {
                  props: {
                    value: res.intro,
                    type: "textarea"
                  },
                  on: {
                    input: val => {
                      that.permission.intro = val;
                    }
                  }
                })
              ]);
            }
          });
        });
      }
    },
    getData(page) {
      var that = this;
      // console.log(page)
      this.$axios.get("backend/permission", page || null, function(res) {
        // console.log(res);
        that.totalPage = res[2];
        that.pageSize = res[3];
        var data = res[0];
        that.data2 = [];
        for (var i = 0; i < data.length; i++) {
          let id = data[i].id;
          let name = data[i].permission;
          let intro = data[i].intro;
          let num = data[i].num;
          let permission = {
            id: id,
            name: name,
            num: num,
            intro: intro
          };
          that.data2.push(permission);
        }
      });
    },
    page(page) {
      this.currentPage = {
        page: page
      };
      this.$store.commit("c_page", page);
      this.getData(this.currentPage);
    },
    remove(params) {
      let permissionId = params.row.id;
      if (permissionId == 1) {
        this.$Message.warning("权限「管理员」不能删除。");
        return false;
      } else {
        let index = params.index;
        var that = this;
        this.$Modal.confirm({
          title: "确认删除",
          content: `你要删除：<br>「 ${this.data2[index].name} 」这个用户吗？`,
          onOk: function() {
            that.$axios.delete(
              "backend/permission/" + permissionId,
              null,
              function(res) {
                if (res == 0) {
                  that.$Message.error("权限不足，删除用户失败！");
                } else {
                  that.$Message.success("删除用户成功！");
                  that.data2.splice(index, 1);
                }
              }
            );
          },
          onCancel: () => {
            this.$Message.info("取消删除");
          }
        });
      }
    }
  },
  mounted() {
    this.getData();
    this.$store.commit("bread", "权限列表");
  }
};
</script>
